<template>
    <div ref="chart02" class="chart002"></div>

</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import http from "@/http";

export default {
  data() {
    return {
      myEchart: null,
      option: {
        title: {
          text: "商家分布",
          left: 20,
          top: 10,
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "bold"
          }
        },
        geo: {
          map: "china",
          zoom: 1.6,
          center: [106, 36],
          itemStyle: {
            areaColor: '#0c4c91',
          },
          emphasis: {
            itemStyle: {
              areaColor: "#70EEFF",
              borderColor: 'rgba(147,234,245,0.5)',
              borderWidth: 1
            }
          }
        },
        tooltip: {},
        legend: {
          orient: 'vertical',
          top:320,
          left:20,
          textStyle: {
            color: '#fff'
          }
        },
        series: []
      }
    }
  },
  methods: {
    async getMapData() {
      // 请求中国地图数据
      let ret = await axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json");
      echarts.registerMap("china", ret.data);

      // 点的数据
      let ret2 = await http.get("/map.json");
      this.option.series = [];
      ret2.forEach(item => {
        this.option.series.push({
          type: "effectScatter",
          name: item.name,
          coordinateSystem: "geo",
          data: item.children,
        });
      });

      this.myEchart.setOption(this.option);
    }
  },
  mounted() {
    this.myEchart = echarts.init(this.$refs.chart02);
    this.getMapData();
  }
}
</script>
<style scoped>
.chart002 {
    height: 100%;
}
</style>